<template>
    <div class="mv">
        <video ref="videoDOM" controls autoplay></video>
        <div v-if="detail" class="songName">{{ detail.title }}</div>
        <div class="author">
            <img v-if="detail" v-lazys="detail.coverUrl" alt="">
            <div v-if="detail">{{ detail.creator.nickname }}</div>
            <button>+ 关注</button>
        </div>
        <div class="Mvinfo">
            <div>发布时间：2013-10-08</div>
            <div>播放：{{ formatNumber(Number(detail.durationms)) }}</div>
        </div>
        <!-- 评论组件 -->
        <Comment :comment="comment" :vid="String(vid)" :type="5" @postAComments="postAComments" />
    </div>
    <div style="position: absolute;top: 50vh;width: 75%;background: rgba(0,0,0,0.4);" v-loading="loading"
        element-loading-text="加载歌单列表中🍒...">
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as videoAPI from '@/api/video'
import useCounterStore from '@/stores/counter'
import Comment from "@/components/Comment.vue"
const { formatNumber } = useCounterStore()
const route = useRoute()
const vid: any = route.query.id
const detail: any = ref(null)
const videoDOM = ref<any>(null)
const comment: any = ref({})
const loading: any = ref(false)

//初始化
onMounted(() => {
    // 加载中
    loading.value = true
    // 获取视频详情信息 --并发处理两个请求
    Promise.all([videoAPI.getVideoDetailInfo(vid), videoAPI.getVideoUrl(vid), videoAPI.getVideoComment({ id: vid })]).then(res => {
        loading.value = false
        // 获取视频详情信息成功
        detail.value = res[0].data.data
        // 获取视频播放地址成功
        setTimeout(() => {
            videoDOM.value.src = res[1].data.urls[0].url
        }, 0)
        //获取视频评论内容
        comment.value = res[2].data
    })
})

function postAComments(val: any) {
    // 调用子组件的方法，将评论内容传递给子组件    
    comment.value.comments.unshift(JSON.parse(val)); 
}

</script>

<style lang="scss" scoped>
.mv::-webkit-scrollbar {
    display: none;
}

.mv {
    width: 100%;
    height: 89%;
    overflow: auto;
    margin-top: 10vh;
    padding-bottom: 10vh;
}

video {
    width: 90%;
    height: 60vh;
    object-fit: fill;
    margin-left: 4vw;
    border-radius: 10px;
}

.songName {
    color: #fff;
    margin: 1vw 4vw;
}

.author {
    margin-left: 4vw;
    /* margin-top: 4vw; */
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);

    img {
        width: 4vw;
        height: 4vw;
        border-radius: 10px;
        margin-right: 14px;
    }

    >div {
        font-size: 12px;
    }

    button {
        border: 1px solid rgba(254, 0, 0, 0.5);
        border-radius: 4px;
        color: rgba(255, 0, 0, 0.8);
        font-size: 10px;
        padding: 4px 10px;
        margin-left: 20px;
        font-weight: 800;
        cursor: pointer;
        background: rgba(255, 255, 255, 0);
    }
}

.Mvinfo {
    width: 90%;
    display: flex;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4vw;
    margin-top: 10px;
    font-size: 12px;

    div {
        margin-right: 3vw;
    }
}
</style>